<template>
  <div>
    <JVxeTable
      ref="refTable"
      toolbar
      row-number
      row-selection
      keep-source
      dragSort
      :height="390"
      :loading="loading"
      :dataSource="dataSource"
      :columns="columns"
      :scroll="getScroll"
    >
      <template #toolbarSuffix>
        <Dropdown>
          <a-button preIcon="ant-design:down" :ant-click-animating-without-extra-node="false">转换字段名</a-button>

          <template #overlay>
            <Menu @click="handleMenuClick">
              <MenuItem key="toUpper" text="转换为大写" icon="ant-design:sort-descending-outlined" />
              <MenuItem key="toLower" text="转换为小写" icon="ant-design:sort-ascending-outlined" />
              <!-- <MenuDivider  /> -->
            </Menu>
          </template>
        </Dropdown>
      </template>
    </JVxeTable>
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref, reactive, unref, computed } from 'vue';
  import { JVxeTable } from '/@/components/jeecg/JVxeTable';
  import { useJvxeMethod } from '/@/hooks/system/useJvxeMethods';
  import { JVxeTypes, JVxeColumn } from '/@/components/jeecg/JVxeTable/types';
  export default defineComponent({
    name: 'ConfigTable',
    components: {
      JVxeTable,
    },
    props: {
      tableData: {
        type: Array,
        default: () => [],
      },
      extendData: {
        type: Object,
        default: () => {},
      },
    },
    setup(props, { emit }) {
      const refTable = ref();
      const loading = ref();
      const dataSource = ref();

      const columns: JVxeColumn[] = [
        {
          title: '字段名',
          key: 'fieldName',
          type: JVxeTypes.input,
          width: '120px',
          placeholder: '请输入${title}',
          defaultValue: '',
          validateRules: [{ required: true, message: '${title}不能为空' }],
        },
        {
          title: '字段文本',
          key: 'fieldTxt',
          type: JVxeTypes.input,
          width: '120px',
          placeholder: '请输入${title}',
          defaultValue: '',
          validateRules: [{ required: true, message: '${title}不能为空' }],
        },
        {
          title: '排序',
          key: 'orderNum',
          type: JVxeTypes.inputNumber,
          width: '120px',
          placeholder: '请输入${title}',
          defaultValue: '0',
        },
        {
          title: '字段类型',
          key: 'fieldType',
          type: JVxeTypes.selectDictSearch,
          width: 200,
          async: true, // 异步搜索，默认为 true
          // 字典表配置信息：数据库表名,显示字段名,存储字段名
          dict: 'field_type',
        },
        {
          title: '控件宽度',
          key: 'fieldWidth',
          type: JVxeTypes.inputNumber,
          width: '120px',
          placeholder: '请输入${title}',
          defaultValue: '0',
        },
        {
          title: '是否显示',
          key: 'isShow',
          minWidth: '80px',
          align: 'center',
          type: JVxeTypes.checkbox,
          customValue: [1, 0],
          defaultChecked: true,
        },
        {
          title: '计算总计',
          key: 'isTotal',
          width: '120px',
          type: JVxeTypes.checkbox,
          customValue: [1, 0],
          defaultChecked: true,
        },
        {
          title: '是否查询',
          key: 'searchFlag',
          width: '120px',
          type: JVxeTypes.checkbox,
          customValue: [1, 0],
          defaultChecked: true,
        },
        {
          title: '字段类型',
          key: 'fieldType',
          type: JVxeTypes.selectDictSearch,
          width: 200,
          async: true, // 异步搜索，默认为 true
          // 字典表配置信息：数据库表名,显示字段名,存储字段名
          dict: 'field_type',
        },
        {
          title: '查询模式',
          key: 'searchMode',
          type: JVxeTypes.selectDictSearch,
          width: 200,
          async: true, // 异步搜索，默认为 true
          // 字典表配置信息：数据库表名,显示字段名,存储字段名
          dict: 'search_mode',
        },
        {
          title: '字典CODE',
          key: 'dictCode',
          type: JVxeTypes.input,
          width: '120px',
          placeholder: '请输入${title}',
          defaultValue: '',
        },

        {
          title: '表达式',
          key: 'func',
          type: JVxeTypes.popup,
          width: '120px',
        },
        {
          title: '表达式参数',
          key: 'funcParam',
          type: JVxeTypes.popup,
          width: '120px',
        },
        {
          title: '聚合类型',
          key: 'aggregateType',
          type: JVxeTypes.selectDictSearch,
          width: '120px',
          async: true, // 异步搜索，默认为 true
          // 字典表配置信息：数据库表名,显示字段名,存储字段名
          dict: 'aggregate_type',
        },
        {
          title: 'JS增强',
          key: 'jsEnhance',
          type: JVxeTypes.input,
          width: '120px',
          placeholder: '请输入${title}',
          defaultValue: '',
        },
      ];

      const newTableData = ref({
        id: '',
        fieldName: '',
        fieldTxt: '',
        isShow: 1,
        isTotal: 0,
        searchFlag: 0,
        searchMode: null,
        dictCode: '',
        fieldHref: null,
        fieldType: 'String',
        orderNum: 1,
        replaceVal: null,
        createBy: '',
        createTime: '',
        updateBy: null,
        updateTime: null,
        func: null,
        funcParam: null,
        aggregateType: null,
      });

      let tableData_ = JSON.parse(JSON.stringify(tableData));

      function getScroll() {
        if (tableData_.length >= 5) {
          return { y: 200, x: 1600 };
        } else {
          return { x: 1600 };
        }
      }

      function handleAddGraphRepoart(addData) {
        // 新增
        let newData = JSON.parse(JSON.stringify(newTableData));
        if (addData) {
          newData = Object.assign(newData, extendData, addData);
        } else {
          newData = Object.assign(newData, extendData);
        }
        const length_ = tableData_.length;
        if (length_ !== 0) {
          newData.orderNum = tableData_[length_ - 1]['orderNum'] + 1;
        }
        tableData_.push(newData);
        // emit('add', newData)
      }

      function clearTableData() {
        tableData_ = [];
      }

      function onSelectChange(selectedRowKeys) {
        selectedRowKeys = selectedRowKeys;
      }

      function checkboxChange(data, name) {
        if (data[name]) {
          data[name] = 0;
        } else {
          data[name] = 1;
        }
      }

      function handleRemoveGraphRepoart() {
        // 删除
        selectedRowKeys.sort(function (a, b) {
          return b - a;
        });
        selectedRowKeys.forEach(function (index) {
          that.tableData_.splice(index, 1);
        });
        // this.$emit('del', this.selectedRowKeys)
        selectedRowKeys = [];
      }

      function getTableData() {
        return JSON.parse(JSON.stringify(tableData_));
      }

      return {
        refTable,
        getScroll,
        handleAddGraphRepoart,
        handleRemoveGraphRepoart,
      };
    },
  });
</script>
